<template>
	<el-dialog :title="dialogTitle" append-to-body :visible.sync="visible" :width="dialogWidth" custom-class="library_dialog">
		<el-tabs v-model="activeName" class="resource_lib_side" tab-position="left" v-if="dialogType === 2">
			<el-tab-pane label="库基本信息" name="baseInfo"></el-tab-pane>
			<el-tab-pane label="库成员" name="member"></el-tab-pane>
			<el-tab-pane label="资源情况" name="analysis"></el-tab-pane>
		</el-tabs>
		<component :is="activeName" :data="libraryData" :disabled="isDisabled" @hand="handleCloseDialog"></component>
	</el-dialog>
</template>

<script>
import member from './member/index';
import analysis from './analysis/index';
import baseInfo from './baseinfo/index';
import { queryLibrarySetting } from '@/api/data/tbNetDiskDir';
export default {
	components: { baseInfo, member, analysis },
	props: {
		value: {
			type: Boolean,
			default: false
		},
		libData: Object
	},
	provide() {
		return {
			getLibId: () => this.libData.id
		};
	},
	data() {
		return {
			visible: this.value,
			activeName: 'baseInfo',
			libraryData: {}
		};
	},
	computed: {
		addOrEdit() {
			return Object.keys(this.libData).length === 0;
		},
		dialogType() {
			if(this.libData.type === 'add') {
				return 1;
			} else if(this.libData.type === 'edit') {
				return 2;
			} else if(this.libData.type === 'look') {
				return 3;
			} else {
				return 1;
			}
		},
		dialogData() {
			return this.libData.data || {};
		},
		dialogWidth() {
			if(this.dialogType !== 2) {
				return '840px';
			} else {
				return '960px';
			}
		},
		dialogTitle() {
			if(this.dialogType === 1) {
				return '新建资源库';
			} else if(this.dialogType === 2) {
				return `编辑资源库 - ${this.dialogData.name}`;
			} else if(this.dialogType === 3) {
				return `资源库【${this.dialogData.name}】详情`;
			} else {
				return '新建资源库';
			}
		},
		isDisabled() {
			return this.dialogType === 3;
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if(!flag) return false;
			this.activeName = 'baseInfo';
			if(this.dialogType === 1) {
				this.libraryData = {};
			} else {
				this.getLibraryDetail();
			}
		}
	},
	methods: {
		//获取资源库详情
		async getLibraryDetail() {
			let result = await queryLibrarySetting(this.dialogData.id).then((res) => res.data);
			if(result.code === '0') {
				let datas = !result.data ? {} : result.data[0];
				this.libraryData = { ...datas };
			}
		},

		//关闭表单
		handleCloseDialog(type) {
			this.visible = false;
			this.$emit(type);
		}
	}
};
</script>

<style>
.library_dialog .el-dialog__body {
	padding: 0;
}
</style>

<style lang="scss" scoped>
.library_wrapper {
	display: flex;
	width: calc(100% + 30px);
	margin: -15px;
	overflow: hidden;
}

.resource_lib_side::v-deep {
	width: 120px;
	height: calc(70vh - 55px);
	flex-shrink: 0;

	.el-tabs__header.is-left {
		width: calc(100% - 1px);
		margin-right: 0;
	}

	.el-tabs__nav-wrap::after {
		background-color: #ebeef5;
	}
}
</style>